<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入jquery完成前后端交互 -->
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
    <title>Boost Searcher</title>
    <!-- 去除网页默认内外边距,html的盒子模型 -->
    <style>
        * {
            /* 外边距 */
            padding: 0;
            /* 内边距 */
            margin: 0;
            background-color: #222734;
            /* 设置字体 */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

        }

        /* body和html呈现一致格式 */
        html,
        body {
            height: 100%;
        }

        /* 类选择器 */
        .container {
            /* div的宽度 */
            width: 800px;
            /* 通过设置外边距达到居中对齐 */
            margin-left: 30%;
            /* 设置外边距的上边距,保持元素和网页顶部距离 */
            margin-top: 2%;

        }

        /* 复合选择器,选择container下的search */
        .container.search {
            /* 宽度与都标签保持一致 */
            width: 100%;
            /* 高度设为52px */
            height: 52px;
        }

        /* 选中input标签 直接设置它的属性*/
        .container .search input {
            width: 550px;
            height: 42px;
            border: 1px solid #485461;
            background-color: #131723;
            color: rgb(201, 209, 217);
            font-size: 16px;
            border-right: none;
            padding: 0 1vh;
        }

        /* 选中button 设置属性 */
        .container .search button {
            width: 100px;
            height: 44px;
            border: 1px solid #485461;
            background-color: #333845;
            font-size: 15px;
            color: rgb(201, 209, 217);
            border-left: transparent;
            cursor: pointer;
        }

        .container .head {
            /* div的宽度 */
            width: 100%;
            /* 通过设置外边距达到居中对齐 */
            margin-left: 25%;
            margin-right: 50%;
            color: white;
            margin-bottom: 20px;
        }

        .container .results {
            width: 700px;
            ;
            word-wrap: break-word;
            word-break: keep-all;
            margin-top: 10;
            float: left;
        }

        /* 设置字体样式提高网站格调 */
        .container .results .item a {
            margin-top: 25px;
            display: block;
            text-decoration: none;
            color: rgb(88, 166, 255);
            font-size: 20px;
            max-width: 700px;
        }
        /* 设置各种标签样式 */
        .container .results .item p {
            margin-top: 0px;
            display: block;
            color: rgb(240, 246, 252);
            font-size: 18px;
            max-width: 700px;
        }

        .container .results .item i {
            margin-top: 0px;
            margin-bottom: 10px;
            display: block;
            color: rgb(139, 148, 158);
            font-size: 16px;
            max-width: 700px;
        }

        .container .results .num {
            margin-top: 8px;
            color: rgb(201, 209, 217);
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>


<body>
    <div class="container">
        <div class="head">
            <h1>Boost Search<h1>
        </div>
        <div class="search">
            <input type="text" placeholder="Search Boost C++ Libraries">
            <button onclick="search()">Search</button>
        </div>
        <div class="results">
            <div class="item">
                <a href="https://www.boost.org/" target="_blank">Boost C++ Libraries</a>
                <p>Welcome to Boost C++ Libraries!</p>
                <i>https://www.boost.org/</i>
            </div>
        </div>
    </div>
    <script>
        function search() {
            // 提取数据 '$'相当于jquery的别称
            let search_words = $(".container .search input").val();
            console.log("search_words: " + search_words);
            //获取 results标签
            let results_lable = $(".container .results")
            //清空历史搜索结果
            results_lable.empty();
            let div_num_lable = $("<div>", {
                class: "num",
                text: "Searching " + "\" " + search_words + " \"" + " in boost libraries ..."
            });
            div_num_lable.appendTo(results_lable)
            //像后端发起请求
            $.ajax({
                type: "GET",
                url: "/s?word=" + search_words,
                success: function (data) {
                    console.log(data);
                    build_html(data);
                }
            })

        }
        // 给input输入框绑定回车事件 实现按键搜索
        $(".container .search input").bind('keyup', function (e) {
            if (e.keyCode == 13) {
                $(".container .search button").click();
            }
        });
        //动态构建网页 前端搜索结果
        function build_html(data) {
            //获取 results标签
            let results_lable = $(".container .results")
            //清空历史搜索结果
            results_lable.empty();
            //对没有搜索结果的情况特殊处理
            if (data == null) {
                let div_num_lable = $("<div>", {
                    class: "num",
                    text: "No available repository result"
                });
                div_num_lable.appendTo(results_lable)
            }
            else {
                //获取搜索结果数量
                let div_num_lable = $("<div>", {
                    class: "num",
                    text: "Showing " + data.length + " available repository results"
                });
                div_num_lable.appendTo(results_lable)
                for (let elem of data) {
                    // console.log(elem.title);
                    // 构建标签
                    let a_lable = $("<a>", {
                        text: elem.title,
                        href: elem.url,
                        //跳转到新标签页
                        target: "_blank"
                    });
                    let p_lable = $("<p>", {
                        text: elem.desc
                    });
                    let i_lable = $("<i>", {
                        text: elem.url
                    });
                    let div_lable = $("<div>", {
                        class: "item"
                    });
                    // 放入盒子
                    a_lable.appendTo(div_lable);
                    p_lable.appendTo(div_lable);
                    i_lable.appendTo(div_lable);
                    div_lable.appendTo(results_lable);
                }
            }
        }
    </script>
</body>

</html>